<script setup lang="ts">
  import {ref} from 'vue'
import {http} from '@/utlis/http.ts'
  import matronlist from './components/matronlist.vue'
  // 获取屏幕边界到安全区域距离
  const { safeAreaInsets } = uni.getSystemInfoSync()
  // :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
  const pageParam=ref({
      page:"1",
      page_size:"6",
      page_count:0,
      q:'' 
    })

//     ])
const guessList=ref([])
 
  const Onseek=()=>{
    uni.request({
      url: 'seek/',
     
      data:pageParam.value,
      header: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
      },
      method: 'GET',
      sslVerify: true,
      success: ({ data, statusCode, header }) => {
        if(data.code==0 || data.code == 200){
          guessList.value=data.list
          pageParam.value.page_count=data.count
      console.log('guessList:',data)
        }
      },
      fail: (error) => {}
    })
   
  }
 
  </script>
  
  <template>
    <view class="navbar" >
      <!-- logo文字 -->
     
      <!-- 搜索条 -->
      <view class="search">
        <input @confirm="Onseek" confirm-type="search" class="icon-search" v-model="pageParam.q" type="search" placeholder="搜索" >
        <uni-icons class="icon-scan" type="search"  @click="Onseek" size="28"></uni-icons>
      </view>
    </view>
    <matronlist :guessList="guessList" :skeletonflag="false"></matronlist>
  
  </template>
  
  <style lang="scss">
  /* 自定义导航条 */
  .navbar {
     
    background-color: #24edc2;
    background-size: cover;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 5px;
   
    .search {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10rpx 0 26rpx;
      height: 64rpx;
      margin: 16rpx 20rpx;
      color: #fff;
      font-size: 28rpx;
      border-radius: 32rpx;
      background-color: rgba(255, 255, 255, 0.5);
    }
    .icon-search {
      width: 95%;
      
      &::before {
        margin-right: 10rpx;
      }
    }
    .icon-scan {
      font-size: 30rpx;
      padding: 15rpx;
    }
  }

page {
background-color: #f7f7f7;
height: 100%;
display: flex;
flex-direction: column;
}

  </style>
  